<app-loading [condition]="isLoading"></app-loading>

<app-toast [message]="toast.message"></app-toast>

@if (!isLoading) {
  <div class="card">
    <h4 class="card-header">Account settings</h4>
    <div class="card-body">
      <form #accountForm="ngForm" (ngSubmit)="save(user)">
        <div class="input-group">
          <span class="input-group-text">
            <i class="fa fa-user"></i>
          </span>
          <input class="form-control" type="text" name="username"
            [(ngModel)]="user.username" placeholder="Username" required>
        </div>
        <div class="input-group">
          <span class="input-group-text">
            <i class="fa fa-envelope"></i>
          </span>
          <input class="form-control" type="email" name="email"
            [(ngModel)]="user.email" placeholder="Email" required>
        </div>
        <div class="input-group">
          <span class="input-group-text">
            <i class="fa fa-black-tie"></i>
          </span>
          <select class="form-control" name="role" [(ngModel)]="user.role">
            <option value="" disabled>Role</option>
            <option value="user">User</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="!accountForm.form.valid">
          <i class="fa fa-save"></i> Save
        </button>
      </form>
    </div>
  </div>
}